<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 1. 拼接语法 语法比较繁琐 不建议使用 -->
    <p>{{firstName+" "+lastName}}</p>

    <!-- 2. 通过函数去组，我们定义一个函数，然后使用 -->
     <!-- 每调用一次，函数里面的逻辑就要运行一次，循环进行这个函数，性能会丢失，效率低 -->
     <p>{{getFullName()}}</p>
     <p>{{getFullName()}}</p>
     <p>{{getFullName()}}</p>
     <p>{{getFullName()}}</p>

     <!-- 3.计算属性 通过computed键值对 做到与上面类似的事情，但是它有缓存 可以多次调用 -->
     <p>{{fullName}}</p>
     <p>{{fullName}}</p>
     <p>{{fullName}}</p>
     <p>{{fullName}}</p>

    <p>本次考试总成绩为{{total}}</p>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        firstName:'Shane',
        lastName:'He',
        scores:[
            {
                id:1,
                name:'语文',
                score:92
            },
            {
                id:2,
                name:'数学',
                score:95
            },
            {
                id:3,
                name:'英语',
                score:90
            },
            {
                id:4,
                name:'化学',
                score:97
            }
        ]
      },
      methods: {
        getFullName(){
            console.log('函数被调用');
            return this.lastName + " " + this.firstName
        } 
      },
      // 计算属性，起名尽量根据属性名取名，所以不要取叫getxxx，增加代码的可读性
      computed:{
        // 计算属性 看起来是函数，但是剋有把它完全当作属性来理解和使用
        fullName(){
          console.log('计算属性被调用');
          return this.lastName + " " + this.firstName
        },
        total(){
          let result = 0
          for(subject of this.scores){
            result += subject.score
          }
          return result
        }
      }
    })
  </script>
</body>
</html>